<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 榕榕
  Date: 2017/10/30
  Time: 16:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>用户管理</title>
    <jsp:include page="../body/link-page.jsp" flush="true"/>

</head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- END META SECTION -->

<!-- CSS INCLUDE -->
<link rel="stylesheet" type="text/css" href="/static/css/cropper/cropper.min.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/jstree/jstree.min.css"/>
<link rel="stylesheet" type="text/css" id="theme" href="/static/css/theme-default.css"/>
<style type="text/css">
    .btn-img{
        padding-left: 20px;
        padding-bottom:20px;
        margin-left:auto;
        margin-right:auto;
    }
    .btn-img label{
        line-height: 35px;
        font-size: 16px;
    }
    .btn-img input[type='button']{
        height: 35px;
        font-size: 14px;
        margin-left: 30px;
    }
</style>
<body>
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="btn-img">
                <label>图片上传</label>
                <input type="button" class="btn btn-success" value="请选择图片"  onclick="chooseImg()"/>
                <%--<span id="avatar-name"></span>--%>
            </div>
            <div class="row-fluid">
                <div class="col-md-4" id="showImg">
                    <div class="cropping-image-wrap">
                        <c:if test="${user.headUrl !=null  && user.headUrl !=''}">
                            <img id="headImg" src="..${user.headUrl}"  class="img-responsive"  onerror="this.src='${basePath}/static/img/head/default-head.jpg'"/>
                        </c:if>
                        <c:if test="${user.headUrl ==null || user.headUrl ==''}">
                            <img id="headImg" src="${basePath}/static/img/head/default-head.jpg" class="img-responsive" />
                        </c:if>
                    </div>
                </div>
                <div class="col-md-4 form-horizontal">
                    <div class="form-group">
                        <div class="col-md-12">
                            <button id="crop_zoomIn" type="button" class="btn btn-primary">
                                <span class="fa fa-search-plus"></span> 放大头像
                            </button>
                            <button id="crop_zoomOut" type="button" class="btn btn-primary">
                                <span class="fa fa-search-minus"></span> 缩小头像
                            </button>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <button id="crop_rotateLeft" type="button" class="btn btn-primary">
                                <span class="fa fa-reply"></span> 向左旋转
                            </button>
                            <button id="crop_rotateRight" type="button" class="btn btn-primary">
                                <span class="fa fa-share"></span> 向右旋转
                            </button>
                        </div>
                    </div>

                    <div class="form-group push-down-30">
                        <div class="col-md-12">
                            <button id="crop_reset" type="button" class="btn btn-primary">
                                <span class="fa fa-eraser"></span> 还原头像
                            </button>
                        </div>
                    </div>
                    <div class="form-group cropping-options">
                        <label class="col-md-3 control-label">
                            裁剪
                        </label>
                        <div class="col-md-3">
                            <label class="switch">
                                <input type="checkbox" checked value="0" name="autoCrop"/>
                                <span></span>
                            </label>
                        </div>
                        <label class="col-md-3 control-label">
                            缩放
                        </label>
                        <div class="col-md-3">
                            <label class="switch">
                                <input type="checkbox" checked value="0" name="zoomable"/>
                                <span></span>
                            </label>
                        </div>
                        <label class="col-md-3 control-label">
                            移动
                        </label>
                        <div class="col-md-3">
                            <label class="switch">
                                <input type="checkbox" checked value="0" name="movable"/>
                                <span></span>
                            </label>
                        </div>
                        <label class="col-md-3 control-label">
                            大小
                        </label>
                        <div class="col-md-3">
                            <label class="switch">
                                <input type="checkbox" value="0" name="resizable" checked/>
                                <span></span>
                            </label>
                        </div>
                        <label class="col-md-3 control-label">
                            模态
                        </label>
                        <div class="col-md-3">
                            <label class="switch">
                                <input type="checkbox" checked value="0" name="modal"/>
                                <span></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 form-horizontal">
                    <div class="form-group">
                        <div class="col-md-12">
                            <div class="cropping-preview-wrap">
                                <div class="cropping-preview"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-6">
                            <div class="input-group">
                                <div class="input-group-addon">X</div>
                                <input type="text" class="form-control" name="imgX" id="dci_x"/>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group">
                                <div class="input-group-addon">Y</div>
                                <input type="text" class="form-control" name="imgY" id="dci_y"/>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-6">
                            <div class="input-group">
                                <div class="input-group-addon">W</div>
                                <input type="text" class="form-control" name="imgW" id="dci_w"/>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group">
                                <div class="input-group-addon">H</div>
                                <input type="text" class="form-control" name="imgH" id="dci_h"/>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="panel-body">
            <input type="hidden" value="girls-1.jpg" name="cropping-image"/>
            <button class="btn btn-success pull-right" onclick="imgCut()" ><span class="fa fa-picture-o"></span>修改头像</button>
        </div>
    </div>
</body>
<jsp:include page="../body/javascript-page.jsp" flush="true"/>
<script type='text/javascript' src="/static/js/plugins/html2canvas.js"></script>
<script type="application/javascript">

   function parentSet(picture) {
       $(".cropping-image-wrap").empty();
       var div=  document.getElementsByClassName('cropping-image-wrap');
       var img=document.createElement("img");
       img.className="img-responsive";
       img.setAttribute("id","headImg");
       img.src=picture.src;
       img.onerror="${basePath}/static/img/head/default-head.jpg";
       div[0].appendChild(img);
   }

    /**
     * 图片的裁剪
     */
    function imgCut() {

        var imgName=document.getElementsByClassName('cropping-preview')[0];
        html2canvas(document.getElementsByClassName('cropping-preview')[0], {
            onrendered: function(canvas) {
                var imgUrl = canvas.toDataURL("image/png");
                updateHead(imgUrl);
            }
        });

    }

    function  updateHead(imgUrl) {
        $.ajax({
            type:"POST",
            url:"/user/imgCut",
            data:{"imgUrl":imgUrl},
            dataType:"json",
            success:function (data) {
               if(data.success){
                   layer.msg(data.msg,{icon:1,timeout:1000},function () {
                       window.parent.location.href="/";
                   });
               }else{
                   layer.msg(data.msg,{icon:2,timeout:1000});
               }
            },
            error:function () {
                layer.msg("修改头像未成功",{icon:0,timeout:1000});
            }
        });
    }

    function cutDown(){
        var imgX = $("#dci_x");
        var imgY = $("#dci_y");
        var imgW = $("#dci_w");
        var imgH = $("#dci_h");
        var crop = $(".cropping-image-wrap > img");

        var options = {
            aspectRatio: 1,
            done: function(data) {
                imgX.val(data.x);
                imgY.val(data.y);
                imgW.val(data.height);
                imgH.val(data.width);
            },
            preview: ".cropping-preview"
        }

        crop.cropper(options);

        $("#crop_zoomIn").click(function() {
            crop.cropper("zoom", 0.1);
        });
        $("#crop_zoomOut").click(function() {
            crop.cropper("zoom", -0.1);
        });
        $("#crop_rotateLeft").click(function() {
            crop.cropper("rotate", -90);
        });
        $("#crop_rotateRight").click(function() {
            crop.cropper("rotate", 90);
        });
        $("#crop_reset").click(function() {
            crop.cropper("reset");
        });
        $("#crop_clear").click(function() {
            crop.cropper("clear");
        });
        $("#crop_destroy").click(function() {
            crop.cropper("destroy");
        });

        $(".cropping-options :checkbox").on("change", function(e){

            $this = $(this);

            console.log($this.is(":checked"));

            options[$this.attr("name")] = $this.is(":checked") ? true : false;

            crop.cropper("destroy").cropper(options);
        });
    }

    window.onload=cutDown();

    $(".cropping-image-wrap").bind('DOMNodeInserted', function(e) {
      cutDown();
    });



    function chooseImg() {
       var srcImg= document.getElementById("headImg").src;
        layer.open({
            type: 2,
            title: "选择图片(双击选择图片)",
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area : ['1045px','63' +
            '0px'],
            content: '/picture/chooseImg',
        });
    }
</script>
</html>



